<template>
	<view class="action-fixed" v-if="_show" :style="pattern">
		<view class="select-item">
			<view class="arrow" :style="arrowPattern"></view>
			<view class="item color-6B707C lh38 font26 fboxRow Ycenter" v-for="(item, index) in list" :key="index" @click="actionTap(item, index)">{{item.label}}</view>
		</view>
		<u-overlay :show="_show" @click="_show = false" :opacity="0"></u-overlay>
	</view>
</template>

<script>
	export default {
		props:{
			list: {
				type: Array,
				default:()=>{
					return []
				}
			},
			isShow:{
				type: Boolean,
				default: false
			},
			pattern: {
				type: String,
				default: 'left: 0;top:72rpx'
			},
			arrowPattern: {
				type: String,
				default: 'left: 50%;'
			},
		},
		computed:{
			_show:{
				get(){
					return this.isShow
				},
				set(val){
					this.$emit('update:isShow',val)
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			actionTap(item, index){
				const obj = {
					index: index,
					value: item
				}
				this._show = false
				this.$emit('action',obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.action-select{}
	.action-fixed{position: absolute; width: 142rpx;}
	.action-fixed .arrow{position: absolute;top: -20rpx;margin-left: -10rpx; width: 0;
            height: 0;
            /* 考虑一些低版本浏览器的兼容性问题 */
            line-height: 0;
            font-size: 0;
            /* 先给四个边框设置颜色为透明色，需要哪个方向的边框，再单独设置哪个边框的颜色即可 */
            border: 10rpx solid transparent;
            /* 朝右的三角形 */
            border-bottom-color: #141720;}
	.select-item{position: relative;z-index: 10080; padding: 16rpx 32rpx; width: 142rpx;background: #141720;box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.16);border-radius: 12rpx;}
	// .select-item{ padding: 16rpx 32rpx; min-width: 142rpx;background: #141720;box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(0,0,0,0.16);border-radius: 12rpx;}
	.select-item .item{padding: 16rpx 0;}
	
</style>
